<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nginx高可用测试页面</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="container">
        <header>
            <h1>🚀 Nginx高可用集群测试页面</h1>
            <p>服务器: <strong>{{ system.hostname }}</strong></p>
        </header>

        <main>
            <div class="status-grid">
                <div class="status-card">
                    <h3>📊 系统状态</h3>
                    <p>CPU使用率: <span class="metric">{{ system.cpu_usage }}%</span></p>
                    <p>内存使用率: <span class="metric">{{ system.memory_usage }}%</span></p>
                    <p>磁盘使用率: <span class="metric">{{ system.disk_usage }}%</span></p>
                </div>

                <div class="status-card">
                    <h3>🌐 连接信息</h3>
                    <p>客户端IP: <code>{{ client_ip }}</code></p>
                    <p>服务器时间: {{ system.timestamp }}</p>
                    <p>运行时间: 从 {{ system.boot_time }} 开始</p>
                </div>
            </div>

            <div class="actions">
                <h3>🔧 测试工具</h3>
                <div class="button-group">
                    <a href="/health" class="btn" target="_blank">健康检查</a>
                    <a href="/api/system" class="btn" target="_blank">系统信息API</a>
                    <a href="/api/visit" class="btn" target="_blank">访问信息API</a>
                    <a href="/load-test" class="btn" target="_blank">负载测试</a>
                </div>
            </div>

            <div class="instructions">
                <h3>📝 运维测试说明</h3>
                <ul>
                    <li>此页面用于测试Nginx负载均衡效果</li>
                    <li>刷新页面可查看不同服务器的响应</li>
                    <li>API接口用于监控系统状态</li>
                    <li>负载测试可验证系统性能</li>
                </ul>
            </div>
        </main>

        <footer>
            <p>🔩 Nginx高可用集群演示 - {{ system.timestamp }}</p>
        </footer>
    </div>
</body>
</html>
